import Vue from "vue";
import VueRouter from "vue-router";

//解决路由重复点击报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err);
}

//解决路由重复点击报错
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
    return originalReplace.call(this, location).catch(err => err);
}
Vue.use(VueRouter);

//定义路由规则，每个路由应该映射一个组件。
const routes = [
    {
        path: "/",
        // 重定向
        redirect: "/login",
    }, 
    {
        path: "/My/:id/:name",
        name: "My",
        component: () => import("@/views/My.vue"),
        props: true
    },
    {
        path: "/login",
        name: "Login",
        component: () => import("@/views/Login.vue"),
        meta:{
            title:"登录"
        }
    },
    {
        path: "/home",
        name: "Home",
        component: () => import("@/views/home/index.vue"),
        meta:{
            //要不要权限
            isAuth:true,
            //面包屑导航的标题
            title:"首页",
            //admin
            role:['admin','user']
        },
        children:[
            //  /home/A =>AName
            {
                path: "A",
                name: "AName",
                component: () => import("@/views/home/A.vue")
            },
           
            {
                path: "B/:id/:name",
                name: "BName",
                component: () => import("@/views/home/B.vue")
            },
            {
                path: "C/:id/:name",
                name: "CName",
                component: () => import("@/views/home/C.vue"),

                //props 第一种写法 值为对象,则该对象的属性会被作为组件props属性 key,value形式传递给c组件
                // props:{
                //     id:6,
                //     name:"周杰伦"
                // }

                //props 第二种写法 值为布尔值，则route.params将会被设置为组件props属性
                // props:true,

                // props 第三种写法 值为函数，则该函数的返回值将会被设置为组件props属性
                props($route){ // $route 是路由对象
                    return {
                        id:$route.params.id,
                        name:$route.params.name,
                        age:$route.query.age
                    }
                }
            }
        ]
    }
]

//创建路由实例，然后传 `routes` 配置
const router = new VueRouter({
    // mode: "history",
    routes: routes
})


// 全局前置守卫
//to到哪个组件
//from从哪个组件开始
//next必须调用，否则路由不会跳转
router.beforeEach((to, from, next) => {
    // 如果目标路径与当前路径相同，则直接调用 next() 而不做任何事情
    // console.log("全局前置守卫",to.path);
    const userRole = 'admin'
    // 检查路由是否需要认证
    if(to.matched.some(record => record.meta.isAuth)){
        // 检查用户角色是否满足路由要求
        if(to.meta.isAuth  && !to.meta.role.includes(userRole)){
            // 如果用户角色不是管理员，则重定向到登录页面
            next({name:"Login"})
       }else{
            //需要认证的路由,判断是否登录
            //设置页面标题
            document.title = to.meta.title || "默认标题";
            next()
       }
    }else{
        //不需要认证的路由,直接允许访问
        document.title = to.meta.title || "默认标题";
        next()
    }
  
})
// 导出路由
export default router;